import VueRouter from "vue-router";
import About from "../pages/About";
import Home from "../pages/Home"
import News from "../pages/News"
import Message from "../pages/Message";
import Deatil from "../pages/Deatil";

export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About,
            children:[

            ]
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    name:'message',
                    path: 'message',
                    component: Message,
                    children:[
                        {
                            name:'detail',
                            path:'detail',
                            component:Deatil,
                            //props的第一种写法值为对象,该对象的所有key-value都会以props的形式传给detail组件(死数据)
                            // props:{
                            //     a:1,
                            //     b:'hello'
                            // }
                            //props的第二种写法，值为布尔值,布尔值为真，就会把该路由组件收到的所有params(注意如果是query参数不会奏效的)参数以props的形式传递给detail组件
                            // props: true
                            //props的第三种写法,值为函数  $route.query.id
                            props({ query: { id, title } }){
                                return {
                                    id,
                                    title
                                }
                            }
                        }
                    ]
                },
                {
                    path:'news',
                    component:News
                }
            ]
        }
    ]
})
